<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <meta name="keywords" content="" />
            <meta name="description" content="" />
            <meta name="author" content="fire" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
            <title>二手车</title>
            <link rel="stylesheet" href="../css/vant.css">
                <script src="../js/axios.min.js"></script>
                <script src="../js/vue.js"></script>
                <script src="../js/common.js"></script>
                <script src="../js/vant.min.js"></script>
                <style>
                    .type {
                        text-align: center;
                        margin: auto;
                        line-height: 30px;
                        width: 25%;
                        height: 30px;
                    }
                    
                    .brand {
                        width: 25%;
                        text-align: center;
                        align-items: center;
                    }
                    
                    .choice {
                        padding: 0rpx 20rpx;
                        display: flex;
                        width: 50%;
                        height: 40px;
                        align-items: center;
                        font-size: 30rpx;
                        margin: auto;
                    }
                    
                    .choice .normal {
                        color: blue;
                        margin: auto;
                    }
                    
                    .choice .selected {
                        color: red;
                        margin: auto;
                        border-bottom: 2px solid #E35885;
                    }
                    
                    .carList {
                        padding: 20px 20px 0 20px;
                        display: flex;
                        justify-content: space-between;
                        /* background-color: #0000FF; */
                    }
                    
                    .tagFirst {
                        margin-left: 0;
                    }
                    
                    .tagBack {
                        margin-left: 10px;
                    }
                    
                    .refresh-moudle {
                      width: 100%;
                      margin-top: -100px;
                      -webkit-overflow-scrolling: touch; /* ios5+ */
                    }

                    .pull-refresh {
                      width: 100%;
                      color: #999;
                      transition-duration: 200ms;
                      font-size: 24px;
                    }

                    .refresh-moudle .down-tip,
                    .up-tip,
                    .refresh-tip {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      height: 100px;
                    }

                    .down-img {
                      width: 35px;
                      height: 35px;
                      margin-right: 15px;
                      transform: rotate(0deg);
                      animation: anticlockwise 0.8s ease;
                    }

                    @keyframes anticlockwise {
                      0% {
                        transform: rotate(-180deg);
                      }
                      100% {
                        transform: rotate(0deg);
                      }
                    }

                    .up-img {
                      width: 35px;
                      height: 35px;
                      margin-right: 15px;
                      transform: rotate(180deg);
                      animation: clockwise 0.8s ease;
                    }

                    @keyframes clockwise {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(-180deg);
                      }
                    }

                    .refresh-img {
                      width: 35px;
                      height: 35px;
                      margin-right: 15px;
                      animation: rotating 1.5s linear infinite;
                    }

                    @keyframes rotating {
                      0% {
                        transform: rotate(0deg);
                      }
                      100% {
                        transform: rotate(1turn);
                      }
                    }
                </style>
            </head>
    
    <body>
        <div id="app">
            <!-- 类型 -->
            <ul style="display: flex;">
                <li class="type" v-for="type,index in types" v-if="index<4" v-on:click="type(index)">{{type.name}}</li>
            </ul>
            <!-- 金额 -->
            <ul style="display: flex">
                <li class="type" v-for="money,index in moneys" v-if="index<4" v-on:click="money(index)">{{money.name}}</li>
            </ul>
            <!-- 品牌 -->
            <ul style="display: flex; flex-flow: row wrap;">
                <li class="brand" v-for="brand,index in brands" v-if="index<8" v-on:click="brand(index)">
                    <img style="height: 50px;" v-bind:src="brand.image" />
                    <br>
                    {{brand.name}}
                </li>
            </ul>
            <!-- 我要卖车 我的车辆 -->
            <ul style="display: flex;padding: 0 20px;height: 60px;">
                <li style="width: 45%;position:relative">
                    <img style="width: 100%;height: 60px;" src="../images/icon_000.png" />
                    <div style="position:absolute;width:100%;line-height:60px;z-indent:2;left:10px;top: 0;color: #FFFFFF;">我要卖车</div>
                </li>
                <li style="width: 45%;margin-left: 10%;position:relative">
                    <img style="width: 100%;height: 60px;" src="../images/icon_001.png" />
                    <div style="position:absolute;width:100%;line-height:60px;z-indent:2;left:10px;top: 0;color: #FFFFFF;">我的车辆</div>
                </li>
            </ul>
            <!-- 选择切换 -->
            <ul class="choice">
                <li class="normal" :class="{'selected' : 0 == switchChoice}" v-on:click="choice(0)">最新上架</li>
                <li class="normal" :class="{'selected' : 1 == switchChoice}" v-on:click="choice(1)">近期浏览</li>
            </ul>
            <!-- 列表区域 -->
            <div class="carList" v-for="item in lists">
                <div style="width: 100px;height: 100%;display: flex;">
                    <img style="width: 100px;height: 100px;border-radius:10rpx;" v-bind:src="item.car_img" />
                </div>
                <div style="width: 100%;height: 100%;margin-left: 5px; align-items: center;">
                    <div style="height: 25px;line-height: 25px;">{{item.car_name}}</div>
                    <div style="height: 25px;line-height: 25px;">{{item.car_year}} {{item.car_drive_mode}} {{item.car_emission}}
                        {{item.car_address}}</div>
                    <div style="height: 25px;line-height: 25px;">{{item.guide_price_min}}</div>
                    <div style="height: 25px;line-height: 25px;display: inline;" v-for="tag,index in item.car_tag" v-if="index < 3">
                        <div style="padding-right: 10px;display: inline">
                            <span style="padding: 0 5px;border: 1px solid #4CABF7;border-radius: 5px;text-align: center;color: #4CABF7;">{{tag}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部高度 -->
            <div style="height: 20px;">
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    types: [{
                        name: 'xx'
                    }, {
                        name: 'xx'
                    }, {
                        name: 'xx'
                    }, {
                        name: 'xx'
                    }],
                    moneys: [{
                        name: 'xx'
                    }, {
                        name: 'xx'
                    }, {
                        name: 'xx'
                    }, {
                        name: 'xx'
                    }],
                    brands: [{
                        name: 'tt',
                        image: '../images/row.png'
                    }],
                    opers: [{
                        name: '我要买车',
                        image: '../images/icon_000.png'
                    }, {
                        name: '我的车辆',
                        image: '../images/icon_001.png'
                    }],
                    lists: [{
                        id: 3,
                        car_name: "111",
                        car_tag: ['aa', 'bb'],
                        car_img: '../images/row.png',
                        car_drive_mode: "4x2",
                        car_address: "ddd",
                        car_emission: "21",
                        guide_price_min: "22.00",
                        created_at: '1607932709'
                    }],
                    isScreenDataGet: false,
                    switchChoice: 0,
                    page: 1,
                    ids: '',
                    isLook: ''
                },
                mounted() {
                    if (this.isScreenDataGet == false) {
                        this.common.httpRequest(this, {
                            url: '/car/saleCarHome',
                            param: {},
                            callback: 'parsingData'
                        });
                    }
                    this.common.httpRequest(this, {
                        url: '/car/saleCarList',
                        param: {
                            page: this.page,
                            ids: this.ids,
                            is_look: this.isLook
                        },
                        callback: 'parsingData'
                    });
                    this.common.addNavigationItem({
                        title: '跳转',
                        image: '',
                        position: 'right',
                        tag: '300'
                    });
                },
                methods: {
                    refresh: function(e) {
                        this.common.print(e);
                        if (this.isScreenDataGet == false) {
                            this.common.httpRequest(this, {
                                url: '/car/saleCarList',
                                param: {
                                    page: this.page,
                                    ids: this.ids,
                                    is_look: this.isLook
                                },
                                callback: 'parsingData'
                            });
                        }
                    },
                    choice: function(e) {
                        this.common.print(e);
                        this.switchChoice = e;
                    },
                    parsingData: function(e) {
                        this.common.print(e);
                        if (e.url == '/car/saleCarHome') {
                            this.isScreenDataGet = true;
                            this.types = e.data.car_type;
                            this.moneys = e.data.car_money;
                            this.brands = e.data.car_brand;
                        } else if (e.url == '/car/saleCarList') {
                            this.lists = e.data.data;
                        } else {}
                    },
                    handleClick: function(e) {
                        this.common.print(e);
                        if (e.type == 'navigationItem') {
                            if (e.tag == 300) {
                                this.common.pushHtml("xxx")
                            }
                        }else {}
                    },
                    type: function(e) {
                        
                    },
                    money: function(e) {
                        
                    },
                    brand: function(e) {
                        
                    },
                    buy: function() {},
                    oper: function(e) {},
                }
            })
            //Android需要调用的方法 android给js传值
            function androidCallJS(e) {
                let data = JSON.parse(e);
                vm.fetchData(data)
            }
        </script>
    </body>
</html>
